<template>
  <div class="app-container">
    <aside>
      <el-form ref="form" :model="form" class="search-form" inline label-width="80px">
        <el-form-item>
          <el-select v-model="form.company">
            <el-option :value="0" label="请选择品牌" />
            <el-option v-for="(item, index) of company.array" :key="'c' + index" :value="item.value" :label="item.label" />
          </el-select>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="getGoods">搜索</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-plus" @click="openGoods(-1)">新增</el-button>
          </el-form-item>
        </el-form-item>
      </el-form>
    </aside>
    <el-container>
      <el-main class="pd-0">
        <el-table :data="goodsList" border stripe>
          <el-table-column prop="id" label="ID" />
          <el-table-column prop="company_name" label="拍摄商" />
          <el-table-column prop="sn" label="产品编号" />
          <el-table-column prop="name" label="产品名称" />
          <el-table-column label="详情图">
            <template slot-scope="{row}">
              <img v-if="row.detail_img" :src="row.detail_img" width="80">
            </template>
          </el-table-column>
          <el-table-column label="荣数封面图">
            <template slot-scope="{row}">
              <img v-if="row.thumb_img" :src="row.thumb_img" width="80">
            </template>
          </el-table-column>
          <el-table-column label="荣数详情图">
            <template slot-scope="{row}">
              <a v-if="row.sip_detail_img" :href="row.sip_detail_img" target="_blank" style="display: block;max-height: 100px;overflow: hidden;">
                <img :src="row.sip_detail_img" width="120">
              </a>
            </template>
          </el-table-column>
          <el-table-column label="描述" prop="desc" />
          <el-table-column label="管理" width="200">
            <template slot-scope="{row, $index}">
              <el-button icon="el-icon-delete" type="info" size="mini" @click="delGoods(row.id)">删除</el-button>
              <el-button icon="el-icon-edit" type="primary" size="mini" @click="openGoods($index)">编辑</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-main>
      <el-footer>
        <orm-create ref="goodsModel" title="产品信息" :form-data="goods" @submit="saveGoods" />
      </el-footer>
    </el-container>
  </div>
</template>

<script>
import company from '@/api/company'
import orm from '@/api/orm'
import OrmCreate from '@/components/ORM/Create'
import Goods from '@/api/goods'
export default {
  name: 'GoodsIndex',
  components: { OrmCreate },
  data() {
    return {
      company: { array: [], json: {}},
      form: {
        company: 0,
        type: ''
      },
      goodsList: [],
      goodsId: 0,
      goods: {
        company: { title: '拍摄商', type: 'select', value: '', items: [] },
        name: { title: '产品名称', type: 'string', value: '' },
        sn: { title: '产品编号', type: 'string', value: '' },
        desc: { title: '产品描述', type: 'text', value: '' },
        detail_img: { title: '详情图', type: 'file', value: '' },
        thumb_img: { title: '荣数封面图', type: 'file', value: '' },
        sip_detail_img: { title: '荣数详情图', type: 'file', value: '' }
      }
    }
  },
  watch: {
    'company.array'() {
      this.goods.company.items = this.company.array
    }
  },
  created() {
    this.getCompanies()
    setTimeout(this.getGoods, 2000)
  },
  methods: {
    getCompanies() {
      company.list().then(res => {
        this.company = res
      }).catch(res => {})
    },
    getGoods() {
      const where = []
      if (this.form.company) {
        where.push(['company', '=', this.form.company])
      }
      orm.list('Goods', where).then(res => {
        const goodsList = res.data.data
        for (const key in goodsList) {
          const comId = goodsList[key].company
          goodsList[key].company_name = this.company.json[comId].name
        }
        this.goodsList = goodsList
      }).catch(res => {})
    },
    openGoods(index) {
      const keys = Object.keys(this.goods)
      if (index > -1) {
        const goods = this.goodsList[index]
        this.goodsId = goods.id
        for (const key of keys) {
          this.goods[key].value = goods[key]
        }
      } else {
        this.goodsId = 0
        for (const key of keys) {
          this.goods[key].value = ''
        }
      }
      this.$refs.goodsModel.open()
    },
    saveGoods(data) {
      if (this.goodsId > 0) {
        orm.update('Goods', this.goodsId, data).then(res => {
          this.getGoods()
          this.$refs.goodsModel.close()
        })
      } else {
        orm.create('Goods', data).then(res => {
          this.getGoods()
          this.$refs.goodsModel.close()
        })
      }
    },
    delGoods(id) {
      this.$confirm('确定删除本产品吗').then(res => {
        Goods.delete(id).then(res => {
          this.getGoods()
        })
      }).catch(res => {})
    }
  }
}
</script>

<style scoped>

</style>
